///<reference types="@i3yun/viewer.markupdiv" />
import { Container } from '../Container';
import { DataService } from "./DataService";
import { ViewerService } from "./ViewerService";
import { HelperTool } from './Common';
export class MarkupManService {
    ViewerService = Container.defineProperty(ViewerService);
    DataService = Container.defineProperty(DataService);
    enable: boolean = true;
    async getApi() {
        let viewer = await this.ViewerService.ViewerPromise;
        let temp = await viewer.loadExtension('Sippreep.Extensions.MarkupDiv.Markup3DExtension');
        return temp as any as Sippreep.Extensions.MarkupDiv.Markup3DExtension;

        //return await .viewer.loadExtension('Sippreep.Extensions.Markup.Markup3DExtension') as any as Sippreep.Extensions.Markup.Markup3DExtension;
    }
    getData(): { items: MarkupItem[]; } {
        const defaultValue: any = { index: -1, items: [] };
        if (!this.DataService.Data.markup) {
            this.DataService.Data.markup = {};
        }
        for (const k of Object.keys(defaultValue)) {
            if (this.DataService.Data.markup[k] == undefined) {
                this.DataService.Data.markup[k] = defaultValue[k];
            }
        }
        return this.DataService.Data.markup;
    }

    async updateViewer() {
        let markup3dApi = await this.getApi();
        markup3dApi.beginUpdate();
        markup3dApi.getItems().clear();
        if (this.enable)
            for (let item of this.getData().items) {
                if (item.visible) {
                    this.buildMarkup(markup3dApi, item);
                }
            }
        markup3dApi.endUpdate();
    }
    OnItemClick(item: MarkupItem) {
    }
    async selectItem(temp: MarkupItem) {
        let markup3dApi = await this.getApi();
        //@ts-ignore
        let item = markup3dApi.getItems().toArray().find(_ => _.tag == temp);
        if (item)
            this.ViewerService.viewer.navigation.fitBounds(false, markup3dApi.getBox(item));
    }

    private buildMesh(temp: MarkupItem) {
        //计算并设置标记显示空间
        if (!temp.anchorValue || temp.anchorValue.length == 0) {
            return;
        }
        if (temp.anchorValue.length >= 3 && temp.face) {
            let a = new Sippreep.Extensions.MarkupDiv.Polygon();
            a.vertices = temp.anchorValue.map((_: number[]) => {
                return new THREE.Vector3().fromArray(_);
            });
            return a;
        }
        else if (temp.anchorValue.length >= 2) {
            let a = new Sippreep.Extensions.MarkupDiv.Polyline();
            a.path = temp.anchorValue.map((_: number[]) => {
                return new THREE.Vector3().fromArray(_);
            });
            if (temp.connect)
                a.path.push(a.path[0].clone());
            return a;
        }
        else if (temp.anchorValue.length == 1) {
            let ps = temp.anchorValue.map((_: number[]) => {
                return new THREE.Vector3().fromArray(_);
            });
            let a = new Sippreep.Extensions.MarkupDiv.Point();
            a.value = ps[0];
            return a;
        }
    }
    private buildMarkup(markup3dApi: Sippreep.Extensions.MarkupDiv.Markup3DExtension, temp: MarkupItem) {
        //创建标记
        let markup = markup3dApi.getItems().add();
        //设置标记依附对象
        //item.anchorDbid = dbid;
        //计算并设置标记显示空间
        let a = this.buildMesh(temp);
        if (!a)
            return;

        markup.anchor = a;
        markup.content = this.buildElement(temp);
        //markup.contentOffset = new THREE.Vector2(0, -42);
        //item.offset = new THREE.Vector3((box.max.x - box.min.x) / 2, (box.max.y - box.min.y) / 2, 0).addScalar(-1);
        markup.appearance = { anchorColor: new THREE.Color().fromArray(HelperTool.ToThreeColor(temp.color)), anchorSizePercent: 5, anchorFront: false };
        //@ts-ignore
        markup.tag = temp;
    }
    private buildElement(temp: MarkupItem) {
        //设置标记内容及偏移
        //<img style="width: 32px;height: 32px;"  onclick="alert(${uiItem.name})" src="fire.gif"></img>
        let content = `<div style="background-color:rgba(${temp.color.join(",")}, 0.8);border: 1px solid black;">
        ${temp.name}
        </div>`;
        let element = HelperTool.stringToElement(content);
        //@ts-ignore
        element.tag = temp;
        element.addEventListener("click", (e) => {
            //@ts-ignore
            this.OnItemClick(e.target.tag);
        });
        return element;
    }
}
export type MarkupItem = { name: string, visible: boolean, color: number[], face: boolean, connect: boolean, anchorValue: number[][] }